<template>
	<view class="flex-col justify-start relative page">
		<view class="flex-col section space-y-60">
			<view class="flex-row justify-center relative">
				<image class="image pos" @click="backpage"
					src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777480137488403283.png" />
				<text class="text">卡券配置</text>
			</view>
			<!-- <view class="flex-row justify-between items-center group">
				<text class="text_2">铁西沈辽路店</text>
				<view class="flex-row space-x-7">
					<text class="font_1 text_3" @click="show = true">切换门店</text>
					<image class="shrink-0 image_2"
						src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777400650594751651.png" />
				</view>
			</view> -->
			<view
				style="width: 360px;height: 60px;background-color: #19c865; border-radius: 13px 13px 0 0; margin-left: 4px;">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" inactive-color="#369861"
					active-color="#5FFF95" :active-item-style="activeItemStyle" :bar-style="barStyle"
					:inactive-item-style="inactiveItemStyle"></u-tabs>
			</view>
		</view>
		<!-- <view v-if="vipcard==1"> -->
		<view class="flex-col group_2 space-y-60 pos_4" v-if="current==0">
			<view class="flex-col section_3">
				<view class="flex-row justify-between items-center group_3 view">
					<view class="flex-row items-center">
						<text class="font_5">*</text>
						<text class="font_3">会员卡名称</text>
					</view>
					<input placeholder="请输入会员卡名称" v-model="CardName"
						placeholder-style="font-size:26rpx;text-align:right;color:#ACACAC;"
						style="margin-right: 20px;width: 110px; height: 30px;" />
				</view>
				<view class="flex-row justify-between group_5">
					<view class="flex-row items-center">
						<text class="font_5">*</text>
						<text class="font_3">会员卡折扣</text>
					</view>
					<view class="flex-row items-center group_6 space-x-15" style="width: 240rpx; height: 40rpx;">
						<u-input v-model="discountvalue" placeholder="请输入会员卡折扣" />
						<!-- <u-input v-model="discountvalue" :type="type" :border="border" @click="show1 = true" /> -->
						<!-- <u-action-sheet :list="discountList" v-model="show1" @click="discountCallback">
						</u-action-sheet> -->
					</view>
				</view>
				<!-- <view class="flex-row justify-between items-center group_3">
					<view class="flex-row items-center">
						<text class="font_5">*</text>
						<text class="font_3">成为会员条件</text>
					</view>
					<input placeholder="请输入成为会员条件" v-model="condition"
						placeholder-style="font-size:26rpx;text-align:right;color:#ACACAC;"
						style="margin-right: 20px;width: 110px; height: 30px;" />
				</view> -->
				<view class="flex-row justify-between items-center group_3">
					<view class="flex-row items-center">
						<text class="font_5">*</text>
						<text class="font_3">充值金额（达成会员条件）</text>
					</view>
					<input placeholder="请输入充值金额" v-model="condition"
						placeholder-style="font-size:26rpx;text-align:right;color:#ACACAC;"
						style="margin-right: 20px;width: 110px; height: 30px;" />
				</view>
				<!-- <view class="flex-col group_7">
					<view class="flex-row justify-between items-center group_8">
						<view class="flex-row items-center">
							<text class="font_5">*</text>
							<text class="font_3">赠送金额</text>
						</view>
						<input placeholder="请输入赠送金额" placeholder-style="font-size:26rpx;text-align:right;color:#ACACAC;"
							style="margin-right: 20px;width: 110px; height: 30px;" />
					</view>
				</view> -->
				<view class="flex-col group_9 space-y-21">
					<text class="self-start font_3 text_10">会员卡说明</text>
					<view class="flex-col justify-start items-start text-wrapper_2">
						<view style="width: 300px; height: auto; margin: auto;overflow-y: auto;">
							<textarea placeholder="请输入会员卡说明" v-model="intro"></textarea>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col justify-start items-center button" @click="vipsubmit"><text class="font_2 text_12"
					>确定</text></view>
		</view>
		<view class="flex-col group_2 space-y-51 pos_4" v-if="current==1">
			<view class="flex-col section_3">
				<view class="flex-row justify-between items-center group_3 view">
					<view class="flex-row items-center">
						<text class="font_5">*</text>
						<text class="font_3">优惠券名称</text>
					</view>
					<input placeholder="请输入优惠券名称" v-model="couponName"
						placeholder-style="font-size:26rpx;text-align:right;color:#ACACAC;"
						style="margin-right: 20px;width: 110px; height: 30px;" />
				</view>
				<view class="flex-row justify-between items-center group_3">
					<view class="flex-row items-center">
						<text class="font_5">*</text>
						<text class="font_3">使用条件</text>
					</view>
					<input placeholder="请输入使用条件" v-model="counponCondition"
						placeholder-style="font-size:26rpx;text-align:right;color:#ACACAC;"
						style="margin-right: 20px;width: 110px; height: 30px;" />
				</view>
				<view class="flex-col group_7">
					<view class="flex-row justify-between items-center group_8">
						<view class="flex-row items-center">
							<text class="font_5">*</text>
							<text class="font_3">优惠券面额</text>
						</view>
						<input placeholder="请输入优惠券面额" v-model="couponMoney"
							placeholder-style="font-size:26rpx;text-align:right;color:#ACACAC;"
							style="margin-right: 20px;width: 110px; height: 30px;" />
					</view>
					<view class="flex-row justify-between items-center group_3">
						<view class="flex-row items-center">
							<text class="font_5">*</text>
							<text class="font_3">可使用的会员组</text>
						</view>
						<view class="flex-row items-center group_4 space-x-15" style="width: 240rpx; height: 40rpx;">
							<u-input v-model="timevalue" :type="type" :border="border" @click="timeshow = true" />
							<u-action-sheet :list="timeList" v-model="timeshow" @click="timeCallback">
							</u-action-sheet>
						</view>
					</view>

					<view class="flex-row justify-between items-center group_3">
						<view class="flex-row items-center">
							<text class="font_5">*</text>
							<text class="font_3">有效期起止时间</text>
						</view>
						<u-calendar v-model="showtime" :mode="mode" @change="changetime" btn-type="success">
						</u-calendar>
						<input disabled placeholder="请选择起止时间" @click="showtime = true" v-model="time"
							placeholder-style="font-size:26rpx;text-align:right;color:#ACACAC;"
							style="margin-right: 20px;width: 150px;height: 30px;font-size: 12px;" />
					</view>

				</view>
				<view class="flex-col group_9 space-y-21">
					<text class="self-start font_3 text_10">优惠券说明</text>
					<view class="flex-col justify-start items-start text-wrapper_2">
						<view style="width: 300px; height: auto; margin: auto;overflow-y: auto;">
							<textarea placeholder="请输入优惠券说明" v-model="explain"></textarea>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col justify-start items-center button" @click="addCoupon">
				<text class="font_2 text_12">确定</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {

		components: {},
		data() {
			return {
				timeshow: false,
				time: '',
				endtime: '',
				showtime: false,
				mode: 'range',
				couponName: '', //优惠券名称
				couponMoney: '', //优惠金额
				CardName: '', //会员卡名称
				intro: '', //说明
				discountvalue: '', //折扣
				condition: '', //条件
				counponCondition: '', //优惠券使用条件
				explain: '', //优惠券说明
				activeItemStyle: {
					color: '#19C865',
					background: '#ffffff',
					borderRadius: '13px 13px 0 0',
					maginLeft: '20px',
				},
				barStyle: {
					marginLeft: '-10px',
					width: '38px',
					height: '2px',
					background: '#19C865',
				},
				inactiveItemStyle: {
					background: '#ffaa00',
				},
				timevalue: '',
				starttime: '',
				value: '',
				type: 'select',
				show: false,
				show1: false,
				border: true,
				timeList: [{
						text: '会员',
						id: 2
					},
					{
						text: '用户',
						id: 1
					},
					{
						text: '全部',
						id: 0
					}
				],
				discountList: [{
						text: '3折'
					},
					{
						text: '9折'
					},
					{
						text: '1折'
					}
				],
				show: false,
				list: [{
					name: '会员卡'
				}, {
					name: '优惠券'
				}],
				current: 0,
				vipvalue: '',
			};
		},
		onLoad() {
			if (uni.getStorageSync('Bshop_name') == '') {
				uni.showToast({
					icon: 'none',
					title: '请在首页选择店铺哦！'
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 2000)
			}
		},
		methods: {
			changetime(e) {
				this.time = e.startDate + '至' + e.endDate
				this.starttime = e.startDate
				this.endtime = e.endDate
				// this.showtime = true
				console.log(e.startDate, e.endDate);
			},
			//创建优惠券
			addCoupon() {
				if(this.couponName == ''){
					uni.showToast({
						icon: 'none',
						title: '优惠券名称不能为空'
					})
					return
				}
				if(this.counponCondition == ''){
					uni.showToast({
						icon: 'none',
						title: '使用条件不能为空'
					})
					return
				}
				if(this.couponMoney == ''){
					uni.showToast({
						icon: 'none',
						title: '优惠券面额不能为空'
					})
					return
				}
				if(this.timevalue == ''){
					uni.showToast({
						icon: 'none',
						title: '请选择可使用的会员组'
					})
					return
				}
				// if(this.showtime == ''){
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请选择起止时间'
				// 	})
				// 	return
				// }
				if(this.explain == ''){
					uni.showToast({
						icon: 'none',
						title: '优惠券说明不能为空'
					})
					return
				}
				this.$Api.addCoupon({
					isAdmin: 2, //1后台创建 2商家创建
					freeMoney: this.couponMoney, //金额
					startDate: this.starttime, //开始时间
					endDate: this.endtime, //结束时间
					conditionMoney: this.counponCondition, //条件
					name: this.couponName, //优惠券名称
					memberGroup: this.vipvalue, //会员组
					shopId: uni.getStorageSync('Bshop_id'),
					dis: this.explain, //说明
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							icon: 'success',
							title: '创建成功'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
					console.log(res.data.data, '卷保存成功')
				})
			},
			//创建会员卡
			vipsubmit() {
				if(this.CardName == ''){
					uni.showToast({
						icon: 'none',
						title: '会员卡名称不能为空'
					})
					return
				}
				if(this.discountvalue == ''){
					uni.showToast({
						icon: 'none',
						title: '会员卡折扣不能为空'
					})
					return
				}
				if(this.condition == ''){
					uni.showToast({
						icon: 'none',
						title: '充值金额不能为空'
					})
					return
				}
				if(this.intro == ''){
					uni.showToast({
						icon: 'none',
						title: '会员卡说明不能为空'
					})
					return
				}
				
				this.$Api.createMemberCard({
					memberCardName: this.CardName, //名称
					condition: this.condition, //金额
					discount: this.discountvalue, //折扣
					intro: this.intro, //说明
					shopId: uni.getStorageSync('Bshop_id'),
				}).then(res => {
					
					if (res.data.code == 0) {
						uni.showToast({
							icon: 'success',
							title: '创建成功'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}
				})
			},

			change(index) {
				this.current = index;
				console.log(this.current)
			},
			backpage() {
				uni.navigateBack({
					delta: 1
				})
			},
			discountCallback(index) {
				this.discountvalue = this.discountList[index].text;
			},
			timeCallback(index) {
				this.timevalue = this.timeList[index].text;
				this.vipvalue = this.timeList[index].id;
			},


		},
	};
</script>

<style>
	/************************************************************
	** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
	** 否则页面将无法正常显示                                  **
	************************************************************/
	page {
		background-color: #f3f3f5;

	}

	html {
		font-size: 16px;
	}

	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	/deep/ .u-list-item {
		width: 160rpx !important;
		height: 160rpx !important;
		background: #ffffff !important;
		border: dashed 2rpx #19c865 !important;

	}

	/deep/ .u-scroll-box {
		background: #93E6B7 !important;
		border-radius: 13px 13px 0 0 !important;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}

	.page {
		/* padding-bottom: 772rpx; */
		background-color: #f3f3f5;
		width: 100%;
		height: 100%;
		/* padding-bottom: 1272rpx;
		background-color: #f3f3f5;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%; */
	}

	.section {
		padding: 104rpx 23rpx 494rpx;
		background-image: linear-gradient(0deg, #f3f3f5 0%, #19c865 61%, #19c865 100%);
	}

	.image {
		width: 20rpx;
		height: 34rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 34rpx;
	}

	.group {
		padding: 0 8rpx;
	}

	.text_2 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 31rpx;
	}

	.font_1 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
	}

	.text_3 {
		color: #ffffff;
		font-weight: 700;
	}

	.image_2 {
		width: 24rpx;
		height: 22rpx;
	}

	.group_2 {
		padding: 0 30rpx;
	}

	.space-y-60>view:not(:first-child),
	.space-y-60>text:not(:first-child),
	.space-y-60>image:not(:first-child) {
		margin-top: 60rpx;
	}

	.pos_4 {
		position: absolute;
		left: 0;
		right: 0;
		/* top: 364rpx; */
		top: 264rpx;
	}

	/deep/ .u-tabs {
		background: #ffffff !important;
		width: 360px !important;
		height: 40px !important;
		border-radius: 13px 13px 0 0 !important;
	}

	/deep/ .u-tabs {
		background: rgba(25, 200, 101, 255) !important;
		border-radius: 13px 13px 0 0 !important;
	}

	.section_3 {
		padding-left: 29rpx;
		padding-top: 49rpx;
		background-color: #ffffff;
		/* border-radius: 24rpx; */
	}

	.group_3 {
		margin-top: 46rpx;
		padding: 0 8rpx 40rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.view {
		margin-top: 0;
	}

	.font_5 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 13rpx;
		font-weight: 500;
		color: #ffa229;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
		font-weight: 500;
		color: #222222;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
		font-weight: 500;
		color: #999999;
	}

	.text_6 {
		margin-right: 18rpx;
	}

	.group_4 {
		margin-right: 32rpx;
	}

	.image_3 {
		width: 24rpx;
		height: 14rpx;
	}

	.group_5 {
		padding: 44rpx 8rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_6 {
		margin-right: 32rpx;
	}

	.space-x-15>view:not(:first-child),
	.space-x-15>text:not(:first-child),
	.space-x-15>image:not(:first-child) {
		margin-left: 15rpx;
	}

	.text_7 {
		margin-right: 18rpx;
	}



	.group_8 {
		padding: 46rpx 8rpx 42rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.text_8 {
		margin-right: 18rpx;
	}

	.view_2 {
		margin-top: 36rpx;
	}

	.section_5 {
		margin-right: 22rpx;
		padding: 10rpx 9rpx 10rpx 13rpx;
		background-color: #ffffff;
		border-radius: 4rpx;
		height: 48rpx;
	}

	.space-x-7>view:not(:first-child),
	.space-x-7>text:not(:first-child),
	.space-x-7>image:not(:first-child) {
		margin-left: 7rpx;
	}

	.image_4 {
		width: 18rpx;
		height: 18rpx;
	}

	.text_9 {
		color: #19c865;
		font-weight: 500;
	}

	.image_5 {
		margin-right: 31rpx;
		margin-top: 29rpx;
		background-color: #f3f3f5;
		border-radius: 16rpx;
		width: 630rpx;
		height: 350rpx;
	}

	.group_9 {
		padding: 36rpx 0 39rpx;
	}

	.space-y-21>view:not(:first-child),
	.space-y-21>text:not(:first-child),
	.space-y-21>image:not(:first-child) {
		margin-top: 21rpx;
	}

	.text_10 {
		margin-left: 25rpx;
		line-height: 27rpx;
	}

	.text-wrapper_2 {
		margin-right: 31rpx;
		margin-top: 21rpx;
		padding: 29rpx 0 59rpx;
		background-color: #f3f3f5;
		border-radius: 16rpx;
		border: solid 1rpx #eeeeee;
	}

	.text_11 {
		margin-left: 33rpx;
		line-height: 27rpx;
	}

	.button {
		padding: 30rpx 0;
		background-color: #19c865;
		border-radius: 44rpx;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
	}

	.text_12 {
		color: #ffffff;
		font-weight: 700;
	}

	.text-wrapper {
		padding: 27rpx 0 54rpx;
		background-color: #ffffff80;
		border-radius: 24rpx 24rpx 0px 0px;
		width: 340rpx;
	}

	.pos_3 {
		position: absolute;
		right: 32rpx;
		top: 283rpx;
	}

	.text_5 {
		color: #369861;
		font-weight: 500;
	}

	.section_2 {
		padding: 40rpx 0 2rpx;
		background-color: #ffffff;
		border-radius: 24rpx 24rpx 0px 0px;
		width: 340rpx;
	}

	.space-y-15>view:not(:first-child),
	.space-y-15>text:not(:first-child),
	.space-y-15>image:not(:first-child) {
		margin-top: 15rpx;
	}

	.pos_2 {
		position: absolute;
		left: 30rpx;
		top: 270rpx;
	}

	.text_4 {
		color: #19c865;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 29rpx;
	}

	.section_4 {
		background-color: #19c865;
		border-radius: 2rpx;
		width: 40rpx;
		height: 4rpx;
	}
</style>
